import React from 'react';
import { EditOutlined } from '@ant-design/icons';
import './index.less';
import { useNavigate } from 'react-router-dom';
import UserAvatar from '../UserAvatar';

export default function UserBrifeInfo() {
    const navigate = useNavigate();

    function toUserEdit() {
        navigate('/personalCenter/editInfo');
    }

    return (
        <>
            <div className="user-brife-info">
                <UserAvatar />
                <div className="user-name">
                    <h2>Keqing</h2>
                    <p className="person-sign">
                        <span>向着星辰与深渊</span>
                    </p>
                    <p className="school">
                        <span>华中科技大学</span>
                    </p>
                    <p className="major">
                        <span>计算机科学与技术</span>
                    </p>
                </div>
                <div className="user-edit" onClick={() => toUserEdit()}>
                    <EditOutlined />
                    <span>编辑资料</span>
                </div>
            </div>
        </>
    );
}
